import React , {Component} from 'react';
import echarts from 'echarts';

class LineChartBasic extends Component{

    constructor(props) {
        super(props);
        this.state = {
            id:Math.random().toString()
        };
    }

    //componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
    componentDidMount(){

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(this.state.id));
        let option = {
            title: {
                text: this.props.title
            },
            yAxis: {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            series: [{
                data: [],
                type: 'line'
            }]
        };

        //fetch方法请求数据
        fetch("LineChartBasic.json")
            .then(res => res.json())
            .then(
            (result) => {
                if(result.isSuccess){
                    option.title.text = result.title;
                    result.data.map(function(item){
                        option.xAxis.data.push(item.name);
                        option.series[0].data.push(item.total);
                    })
                    // 绘制图表
                    myChart.setOption(option);
                } else {

                }              
            },
            // 注意：需要在此处处理错误
            // 而不是使用 catch() 去捕获错误
            // 因为使用 catch 去捕获异常会掩盖掉组件本身可能产生的 bug
            (error) => {

            }
        )
        
    }

    render(){
        return (
            <div id={this.state.id} style={{width:'100%',height:500}}>
            </div>
        );
    }
}

export default LineChartBasic;

